<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工单进度条</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }
    .progress-container {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    .progress-step {
      text-align: center;
      position: relative;
      margin: 10px;
    }
    .progress-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
      font-weight: bold;
      color: #fff;
      position: relative;
    }
    .done {
      background-color: #4caf50;
    }
    .progress-blue {
      background-color: #2196f3;
    }
    .tooltip {
      display: none;
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 15px;
      width: 250px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      z-index: 10;
    }
    .progress-step:hover .tooltip {
      display: block;
    }
    .tooltip h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }
    .tooltip p {
      margin: 5px 0;
      font-size: 14px;
    }
    .tooltip .status {
      color: #4caf50;
      font-weight: bold;
    }
    .tooltip .actions button {
      margin: 5px 3px;
      padding: 5px 10px;
      border: none;
      border-radius: 5px;
      background: #2196f3;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>工单进度条</h2>
  <div class="progress-container" id="progressContainer"></div>

  <script>
    // 模拟从接口获取的数据
    const stepsData = [
      {
        name: "原料发放",
        progress: 100,
        status: "已完成"
      },
      {
        name: "解冻",
        progress: 100,
        status: "已完成"
      },
      {
        name: "机器分切",
        progress: 99,
        status: "已结束",
        detail: {
          taskProgress: "1192/1200",
          plan: 1200,
          good: 1192,
          bad: 8,
          approved: 1192,
          pending: 0,
          duration: "0天1小时20分钟",
          lastReport: "2025-08-08 11:37:35"
        }
      },
      {
        name: "滚揉腌制",
        progress: 50,
        status: "进行中",
        detail: {
          taskProgress: "1000/1200",
          plan: 1200,
          good: 1000,
          bad: 8,
          approved: 1000,
          pending: 0,
          duration: "0天2小时15分钟",
          lastReport: "2025-08-08 11:37:35"
        }
      },
      {
        name: "内包装",
        progress: 20,
        status: "进行中",
        detail: {
          taskProgress: "100/500",
          plan: 500,
          good: 100,
          bad: 8,
          approved: 100,
          pending: 0,
          duration: "0天3小时18分钟",
          lastReport: "2025-09-08 11:37:35"
        }
      }
    ];

    const container = document.getElementById("progressContainer");

    stepsData.forEach(step => {
      const stepDiv = document.createElement("div");
      stepDiv.className = "progress-step";

      const circle = document.createElement("div");
      circle.className = "progress-circle";

      if (step.progress === 100) {
        circle.classList.add("done");
        circle.innerText = "✔";
      } else if (step.progress >= 99) {
        circle.classList.add("done");
        circle.innerText = step.progress + "%";
      } else {
        circle.classList.add("progress-blue");
        circle.innerText = step.progress + "%";
      }

      const label = document.createElement("div");
      label.innerText = step.name;

      stepDiv.appendChild(circle);
      stepDiv.appendChild(label);

      if (step.detail) {
        const tooltip = document.createElement("div");
        tooltip.className = "tooltip";
        tooltip.innerHTML = `
          <h3>${step.name}</h3>
          <p>任务进度: ${step.detail.taskProgress}</p>
          <p>计划数: ${step.detail.plan}</p>
          <p>良品数: ${step.detail.good}</p>
          <p>不良数: ${step.detail.bad}</p>
          <p>已审核良品数: ${step.detail.approved}</p>
          <p>待审核良品数: ${step.detail.pending}</p>
          <p>累计工时: ${step.detail.duration}</p>
          <p>最后报工时间: ${step.detail.lastReport}</p>
          <p class="status">${step.status}</p>
          <div class="actions">
            <button onclick="window.open('报工.html');">新建报工</button>
            <button>查看任务</button>
            <button>查看报工</button>
          </div>
        `;
        stepDiv.appendChild(tooltip);
      }

      container.appendChild(stepDiv);
    });
  </script>
</body>
</html>
